<script setup lang="ts">
  import { queryStateByCode } from '@/api/dict';
  import { computed, ref, watch } from 'vue';

  const props = defineProps({
    type: {
      required: true,
      type: String,
    },
    value: {
      required: true,
      type: [String, Number],
    },
  });

  const dictArr = ref<any[]>([]);

  watch(
    () => props.type,
    (type) => {
      queryStateByCode(type).then((data) => {
        dictArr.value = data;
      });
    },
    {
      immediate: true,
    }
  );

  const currentDict = computed(() => {
    return dictArr.value.find((e) => {
      return e.stateValue === String(props.value);
    });
  });

  // TODO: icon动态导入，引入第三方图标库，引入本地svg
  const icon = computed(() => {
    if (currentDict.value) {
      const { iconUrl } = currentDict.value;
      if (!iconUrl) {
        return '';
      }
      return iconUrl.replaceAll('arco:', '');
    }
    return null;
  });
</script>

<template>
  <a-tag v-if="currentDict" :color="currentDict.style">
    <template v-if="icon" #icon>
      <component :is="icon" />
    </template>
    {{ currentDict.stateLabel }}
  </a-tag>
</template>

<style lang="less" scoped></style>
